<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="food" :model="food" :rules="foodRules" label-width="120px" v-loading.screen.lock="fullScreenlock">
                <el-form-item prop="name" label="菜品名称:">
                    <el-input v-model="food.name"></el-input>
                </el-form-item>
                <el-form-item label="菜品图:" prop="pic">
                    <el-upload class="avatar-uploader" :action="getLocation" ref="upload" :data="pic" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="food.url" :src="ip+food.url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸：325*300像素</span>
                </el-form-item>
                <el-form-item label="分类:" prop="typeId">
                    <el-radio-group v-model="food.type_id">
                        <el-radio v-for="t in types" :label="t.id" :key="t.id">{{t.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜品描述:" prop="description">
                    <el-input type="textarea" v-model="food.description" placeholder="请填写菜品描述"></el-input>
                </el-form-item>
                <el-form-item label="价格:" prop="price">
                    <el-input v-model="food.price" placeholder="请填写金额"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { pic_location, ip } from '../../utils/local.js'
import { allFoodType, addFood, putFood } from '../../api/server.js'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            types: ['热卖', '套餐', '热菜', '小吃', '零食', '主食'],
            getLocation: pic_location,
            fullScreenlock: false,
            pic: {},
            foodRules: {
                name: [{ required: true, message: '请输入菜品名称' }]
            },
            ip: ip
        }
    },
    created() {
        this.getFoodTypes()
    },
    computed: mapState({
        food: state => state.Food.food
    }),
    methods: {
        handleAvatarSuccess(res) {
            console.log('返回', res)
            if (res.code === '000000') {
                this.fullScreenlock = false
                this.food.url = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            this.pic.pictureFile = file
            this.pic.width = 325 * 3
            this.pic.height = 300 * 3
            return this.upload(file)
        },
        upload(file) {
            this.fullScreenlock = true
        },
        choose_type(id) {
            console.log('type', id)
        },
        getFoodTypes() {
            allFoodType(1, 20)
                .then(res => {
                    this.types = res.result
                })
        },
        add() {
            let food = this.food
            food.typeId = food.type_id
            console.log('food', food)
            if (food.id) {
                putFood(food)
                    .then(res => {
                        this.$message.success('修改成功')
                    })
            } else {
                addFood(food)
                    .then(res => {
                        this.$message.success('添加成功')
                    })
            }
        },
        back() {
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 325px;
  height: 300px;
}
.avatar-uploader {
  width: 325px;
  height: 300px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tips {
  color: grey;
  margin-left: 10%;
}
</style>


